<template>
	<div class="home">
		<BaseOperation @choiceBase="choicePortal" @setup="setup" ref="BaseOperationRef"></BaseOperation>
		<div class="phone">
			<div class="phone-all">
				<img :src="PhoneTop" alt="" class="statusBar" />
				<section class="phone-container">
					<component :is="component" :datas="componentData" class="componentsClass">
						<template #deles>
							<div v-show="deleShow" class="deles" @click.stop="deleteObj(component)">
								<!-- 删除组件 -->
								<span class="iconfont icon-sanjiaoxingzuo"></span>
								{{ name }}
								<van-icon name="delete" />
							</div>
						</template>
					</component>
				</section>
				<!-- 手机高度 -->
				<div class="phoneSize">iPhone 15手机高度</div>
			</div>
		</div>
		<div class="decorateAll">
			<component :is="rightcom" :datas="currentproperties" v-if="rightcom != ''" />
		</div>
	</div>
</template>

<script setup lang="ts">
import utils from '/@/utils/decorate/index'; // 方法类
import { ref, defineAsyncComponent, reactive, toRefs, onMounted, nextTick } from 'vue';
import PhoneTop from '/@/assets/decoration/images/phoneTop.png';
import componentProperties from '/@/utils/decorate/componentProperties'; // 组件数据
import { decorationApi } from '/@/api/shop/decoration/index';
import messageUtils from '/@/utils/messageUtils';
import _ from 'lodash';

import BaseOperation from './base/BaseOperation.vue';
// const BaseOperation = defineAsyncComponent(() => import('./base/BaseOperation.vue'));
const BaseOperationRef = ref();
const choose = reactive({
	deleShow: true,
	rightcom: '', // 右侧组件切换
	currentproperties: '', // 当前属性  默认：页面设置
	component: '',
	componentData: '',
	name: '',
});

const datas = reactive({
	templateId: String,
	pageSetup: {
		mode: 'light',
		theme: 'orange',
		fontSize: 10,
		isBack: true, // 是否返回按钮
		titleHeight: 35, // 高度
		// bgColor: '', //背景颜色
		// bgImg: '', // 背景图片
	},
	pageNavigation: {
		name: '顶部导航',
		mode: 'inner',
		alwaysShow: 1,
		type: 'color',
		color: '',
		src: '',
		placeholder: 1,
		bgColor: '', //背景颜色
		bgImg: '', // 背景图片
		list: {
			mp: [
				// {
				// 	width: 0,
				// 	height: 0,
				// 	top: 0,
				// 	left: 0,
				// 	type: 'search',
				// 	text: '',
				// 	textColor: '',
				// 	src: '',
				// 	url: '',
				// 	placeholder: '请输入关键字',
				// 	borderRadius: 0,
				// },
			],
			h5: [
				// {
				// 	width: 0,
				// 	height: 0,
				// 	top: 0,
				// 	left: 0,
				// 	type: 'search',
				// 	text: '',
				// 	textColor: '',
				// 	src: '',
				// 	url: '',
				// 	placeholder: '请输入关键字',
				// 	borderRadius: 0,
				// },
			],
		},
	},
	tabBar: {},
	floatbut: {},
	popupad: {},
	pageComponents: [], //页面组件
});

let deleteObj = (name: String) => {
	console.log('name: ', name);
	if (name === 'tabBar') {
		datas.tabBar = {};
	} else if (name === 'floatbut') {
		datas.floatbut = {};
	} else {
		datas.popupad = {};
	}
	choose.rightcom = '';
	choose.currentproperties = '';
	choose.component = '';
	choose.componentData = '';
	choose.name = '';
};
let choiceBase = (type: string) => {
	const result = datas.pageComponents.filter((e) => e.component === type);
	if (result.length < 1) {
		let data = utils.deepClone(componentProperties.get(type));
		datas.pageComponents.forEach((res, index) => {
			/* 修改选中 */
			if (res.active === true) res.active = false;
			/* 替换提示 */
		});
		datas.pageComponents.push(data);
		choose.rightcom = data.style;
		/* 丢样式 */
		choose.currentproperties = data.setStyle;
	} else {
		console.log('已经存在');
		datas.pageComponents.forEach((res, index) => {
			/* 修改选中 */
			if (res.active === true) res.active = false;
			if (res.type === result[0].type) {
				res.active = true;
			}
			/* 替换提示 */
		});

		choose.rightcom = result[0].style;
		/* 丢样式 */
		choose.currentproperties = result[0].setStyle;
	}
};

const choicePortal = (type: String) => {
	let data = utils.deepClone(componentProperties.get(type));
	if (type === 'tabBar') {
		console.log('判空tabBar: ', _.isEmpty(datas.tabBar));
		if (_.isEmpty(datas.tabBar)) {
			console.log('tabBar is null');
			datas.tabBar = data;
		}
		choose.rightcom = datas.tabBar.style;
		choose.currentproperties = datas.tabBar.setStyle;
		choose.component = datas.tabBar.component;
		choose.componentData = datas.tabBar.setStyle;
		choose.name = datas.tabBar.text;
	} else if (type === 'floatbut') {
		if (_.isEmpty(datas.floatbut)) {
			console.log('floatbut is null');
			datas.floatbut = data;
		}
		choose.rightcom = datas.floatbut.style;
		choose.currentproperties = datas.floatbut.setStyle;
		choose.component = datas.floatbut.component;
		choose.componentData = datas.floatbut.setStyle;
		choose.name = datas.floatbut.text;
	} else {
		if (_.isEmpty(datas.popupad)) {
			console.log('popupad is null');
			datas.popupad = data;
		}
		choose.rightcom = datas.popupad.style;
		choose.currentproperties = datas.popupad.setStyle;
		choose.component = datas.popupad.component;
		choose.componentData = datas.popupad.setStyle;
		choose.name = datas.popupad.text;
	}
};

let saveInfo = async () => {
	try {
		let result = await decorationApi().createBaseComponents({
			id: datas.templateId,
			baseComponents: { tabBar: datas.tabBar, floatbut: datas.floatbut, popupad: datas.popupad },
			setup: datas.pageSetup,
			navigation: datas.pageNavigation,
		});
		messageUtils().success('操作成功');
	} catch (error) {
		console.log(error);
		messageUtils().error('装修基础模版失败');
	}
};

let setup = (name: string) => {
	console.log('页面设置');

	if (name === 'setup') {
		choose.rightcom = 'setting';
		choose.currentproperties = datas.pageSetup;
	} else {
		console.log('设置导航');
		choose.rightcom = 'navigation';
		choose.currentproperties = datas.pageNavigation;
	}
};

const init = (templateId, baseTemplate, navigation, setUp) => {
	console.log('shopBase init templateId: ', templateId);
	console.log('shopBase init setup: ', setUp);
	console.log('shopBase init navigation: ', navigation);
	console.log('shopBase init baseTemplate: ', baseTemplate);
	datas.templateId = templateId;
	if (setUp) {
		console.log('设置 setup');
		datas.pageSetup = setUp;

		console.log('end 设置 setup: ', datas.pageSetup);
	}

	if (navigation) {
		console.log('设置 navigation');
		datas.pageNavigation = navigation;
		console.log('end 设置 navigation: ', datas.pageNavigation);
	}

	if (baseTemplate) {
		datas.pageComponents = baseTemplate;
		console.log('end 设置 baseTemplate: ', datas.pageComponents);
		datas.tabBar = baseTemplate.tabBar;
		datas.popupad = baseTemplate.popupad;
		datas.floatbut = baseTemplate.floatbut;

		if (!_.isEmpty(datas.tabBar)) {
			choicePortal('tabBar');
			BaseOperationRef.value.operationTypeName('tabBar');
		} else if (!_.isEmpty(datas.popupad)) {
			choicePortal('popupad');
			BaseOperationRef.value.operationTypeName('popupad');
		} else if (!_.isEmpty(datas.floatbut)) {
			choicePortal('floatbut');
			BaseOperationRef.value.operationTypeName('floatbut');
		}
	}
};

defineExpose({ saveInfo, init, choicePortal });

const { pageComponents, pageSetup } = toRefs(datas);
const { rightcom, currentproperties, deleShow, component, componentData, name } = toRefs(choose);
</script>

<style lang="scss" scoped>
.home {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	//flex: 1;
	.phone {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f7f8fa;
		.phone-all {
			height: 100%;
			width: 375px;
			box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
			position: relative;
			//overflow-x: hidden;
			//overflow-y: auto;
			/* 手机高度 */
			.phoneSize {
				position: absolute;
				left: -137px;
				top: 640px;
				font-size: 12px;
				color: #a2a2a2;
				border-bottom: 1px solid #dedede;
				width: 130px;
				//height: 21px;
				//line-height: 21px;
			}

			/* 状态栏 */
			.statusBar {
				width: 100%;
				display: block;
				position: absolute;
				height: 22px;
				top: 0;
				left: 0;
				z-index: 10;
			}

			/* 主体内容 */
			.phone-container {
				top: 22px;
				height: calc(100% - 22px);
				box-sizing: border-box;
				cursor: pointer;
				width: 100%;
				position: absolute;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				//overflow-y: auto;
				//overflow-x: hidden;
				.componentsClass {
					border: 1px solid #fff;
					&:hover {
						border: 1px dashed #155bd4;
					}
				}
			}
		}
	}

	.decorateAll {
		width: 376px;
		overflow-y: scroll;
		overflow-x: hidden;
		position: relative;
		padding: 0 12px;
		background: #fff;
	}

	.deles {
		position: absolute;
		min-width: 80px;
		text-align: center;
		line-height: 25px;
		background: #fff;
		height: 25px;
		font-size: 12px;
		left: 103%;
		top: 50%;
		transform: translateY(-50%);
		.icon-sanjiaoxingzuo {
			position: absolute;
			left: -11px;
			color: #fff;
			font-size: 12px;
			top: 50%;
			transform: translateY(-50%);
		}
		&:hover {
			i {
				display: block;
				position: absolute;
				left: 0;
				font-size: 16px;
				top: 0;
				text-align: center;
				line-height: 25px;
				width: 100%;
				color: #fff;
				height: 100%;
				z-index: 10;
				background: rgba(0, 0, 0, 0.5);
			}
			.icon-sanjiaoxingzuo {
				color: rgba(0, 0, 0, 0.5);
			}
		}

		i {
			display: none;
		}
	}
}
</style>
